<template>
  <div class="search-box">
    <div class="search-every">
      <span class="col-label">用户名：</span>
      <Input placeholder="输入用户名"
             class="search-input"
             v-model="formData[0].Value" />
    </div>
    <div class="search-every">
      <span class="col-label">店铺名：</span>
      <Input placeholder="输入店铺名"
            class="search-input"
            v-model="formData[1].Value" />
    </div>
    <div class="search-every">
      <span class="col-label">用户状态：</span>
      <Select v-model="formData[2].Value"
              class="search-select">
        <Option v-for="item in IntegralType"
                :value="item.number"
                :key="item.number">{{ item.text }}</Option>
      </Select>
    </div>
    <Button @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="md-search">
      搜索</Button>
    <Button @click="handleReset"
            class="search-btn">
      重置</Button>
  </div>
</template>

<script>
export default {
  name: 'search-form',
  data () {
    return {
      formData: [
        {
          'Key': 'PhoneNum',
          'Value': ''
        },
        {
          'Key': 'BusinessName',
          'Value': ''
        },
        {
          'Key': 'IntegralType',
          'Value': ''
        }
      ],
      IntegralType: [
        {
          number: 0,
          text: '收入'
        },
        {
          number: 1,
          text: '支出'
        }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.formData = [
        {
          'Key': 'PhoneNum',
          'Value': ''
        },
        {
          'Key': 'BusinessName',
          'Value': ''
        },
        {
          'Key': 'IntegralType',
          'Value': ''
        }
      ]
    },
    handleSearch () {
      this.$emit('search', this.formData)
    },
    handleReset () {
      this.formData = [{
        'Key': 'PhoneNum',
        'Value': ''
      },
      {
        'Key': 'BusinessName',
        'Value': ''
      },
      {
        'Key': 'IntegralType',
        'Value': ''
      }]
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  height: 32px;
  background-color: #fff;
  .search-every {
    float: left;
    margin-right: 10px;
    .col-label {
      display: block;
      float: left;
      height: 32px;
      line-height: 32px;
      font-weight: 600;
    }
    .search-select {
      display: block;
      float: left;
      width: 90px;
    }
    .search-input {
      width: 110px;
    }
  }
  .search-btn {
    float: left;
    margin-right: 10px;
    width: 80px;
  }
}
</style>
